<template>
  <page-scroll :footer="false">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="video-content" v-if="showCon">
        <videom3u8 :videoPic="videoPic" :playerOptions="playerOptions" />
        <div class="container">
          <div class="he">
<!--            <div class="flexs">-->
<!--              {{ datas.name }}-->
<!--            </div>-->

            <div class="str">
              <div @click="path_urls('/income/index')" class="btn esoring">
                {{ $t("page3.doc69") }}
              </div>
            </div>
          </div>

          <ul class="body">
            <li>
              <div class="n">{{ $t("page.doc117") }}：</div>
              <div class="flex1">
                {{ datas.type }}
              </div>
            </li>
            <li>
              <div class="n">{{ $t("page.doc118") }}：</div>
              <div class="flex1">
                {{ datas.director }}
              </div>
            </li>
            <li>
              <div class="n">{{ $t("page.doc119") }}：</div>
              <div class="flex1 lh-24" v-html="datas.summary"></div>
            </li>
          </ul>

          <div v-if="datalist.length != 0">
            <div class="title1 flex">
               <img src="@/assets/images/praise.png" alt="">
              {{ $t("page.doc120") }}
            </div>

            <div class="videoList">
              <ul class="list">
                <li
                  @click="checkLevel(item)"
                  v-for="(item, k) in datalist"
                  :key="k"
                >
                  <div class="pic" :data-text="item.hasWatch?$t('page.doc4'):$t('page4.doc6')">
                    <img v-lazy="item.coverUrl" alt="" />
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </template>
  </page-scroll>
</template>

<script>
import videom3u8 from "./videom3u8.vue";

export default {
  components: {
    videom3u8,
  },
  data() {
    return {
      title: this.$t("page1.doc42"),
      datas: [],
      id: this.$route.query.id,
      datalist: [],
      isPlay: true,
      isPlay2: true,
      videoPic: "",
      value: 0,
      score: 0,
      userInfoIevel: "", // 用户等级
      showVideo: false,
      videoAuto: false,
      levelData: [],
      showCon: false,
      playerOptions: {},
    };
  },
  mounted() {
    // setTimeout(() => {
    //     document.addEventListener("WeixinJSBridgeReady",()=> {
    //         video.play();
    //     }, false);

    //     this.$refs.myVideo.addEventListener('play', this.onVideo);
    //     this.$refs.myVideo.addEventListener('pause', this.onPause);

    this.getinfo();
    // },500)

    // this.getuser();
    this.getLevel();
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  methods: {
    checkLevel(item) {
      this.showCon = false;
      this.id = item.movieId;
      this.playerOptions = {};
      this.getinfo();
      this.getLevel();
      //this.path_url('/home/vrdetails?id=' + item.movieId, item.movieId)
    },
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levelData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    // 返回
    go_back() {
      this.$router.go(-1);
    },
    rateChange() {
      // 限制用户评定的星级，只允许评分3星以上，如果vip用户选择1-3星评分，应该提示给出提示：请评分3星以上
      if (this.value <= 3) {
        this.value = this.score;
        this.$toast(this.$t("page3.doc61"));
        return;
      }
      this.$post(this.URL.home.movie_like, {
        movieId: this.id,
        score: this.value,
      }).then((res) => {
        if (res.code == 0) {
          this.score = this.value;
          this.$toast(res.message);
          // this.$toast(this.$t('page3.doc57'))
        } else {
          this.value = this.score;
          this.$toast(res.message);
          // this.$toast(this.$t('page3.doc58'))
        }
      });
    },
    getinfo() {
      this.$post(this.URL.home.movie_detail, {
        movieId: this.id,
      }).then((res) => {
        if (res.code == 0) {
          this.datas = res.data;
          this.score = res.data.score;
          this.value = this.score;
          this.showCon = true;
          //this.showVideo=true;
          //this.$refs.myVideo.src = res.data.url;

          if (res.data.coverUrl == "") {
            this.videoPic = require("../../assets/images/none1.png");
          } else {
            this.videoPic = res.data.coverUrl;
          }
          this.playerOptions = {
            autoplay: false, // 如果true,浏览器准备好时开始回放。
            muted: false, // 默认情况下将会消除任何音频。
            loop: false, // 导致视频一结束就重新开始。
            preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: "en_US",
            aspectRatio: "4:3", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            width: "100%",
            sources: [
              {
                src: res.data.url,
              },
            ],
            poster: "", // 封面地址
            notSupportedMessage: this.$t("new.doc52"), //允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              timeDivider: true, // 当前时间和持续时间的分隔符
              durationDisplay: true, // 显示持续时间
              remainingTimeDisplay: false, // 是否显示剩余时间功能
              fullscreenToggle: true,
            },
          };
          // this.playerOptions.src = res.data.url;
          this.getlist();
        } else {
          this.$toast(res.message);
        }
      });
      this.$post(this.URL.home.movie_watch, {
        movieId: this.id,
      }).then((res) => {
        if (res.code == 0) {
        } else {
          this.$toast(res.message);
        }
      });
    },
    // 用户信息
    getuser() {
      this.$post(this.URL.member.personal, {}).then((res) => {
        if (res.code == 0) {
          this.userInfo = res.data;
          if (res.data) {
            this.userInfoIevel = res.data.level;
          }
        } else {
        }
      });
    },

    getlist() {
      this.$post(this.URL.home.movie_list2, {
        movieId: this.id,
        random: 1,
        page: this.pageSize,
        pageSize: 9,
      }).then((res) => {
        if (res.code == 0) {
          this.datalist = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },

    getLike() {
      if (this.datas.like) {
        return;
      }
      this.$post(this.URL.home.movie_like, {
        movieId: this.id,
        score: 5,
      }).then((res) => {
        if (res.code == 0) {
          this.datas.like = !this.datas.like;
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url, id) {
      this.id = id;
      this.getinfo();
      // this.onVideo()
      this.isPlay = true;
      this.isPlay2 = true;
      this.$router.replace({
        path: url,
        query: {},
      });
    },
    path_urls(url) {
      this.$router.replace({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .content-container {
  padding-top: 0 !important;
}

.he {
  padding: 0.48rem 0 0.32rem 0;

  > .flexs {
    font-size: 0.36rem;
    font-weight: 600;
    margin-bottom: 0.24rem;
    line-height: 1.4;
  }

  .str {
  }
}

.body {
  li {
    display: flex;
    font-size: 0.28rem;
    margin-bottom: 0.14rem;

    .n {
      color: rgba(255, 255, 255, 0.6);
    }
  }
}

.title1 {
  font-size: 0.32rem;
  font-weight: 600;
  padding: 0.4rem 0 0.36rem 0;
  display: flex;
  align-items: center;

  img {
    margin-right: 0.12rem;
    height: 0.32rem;
  }
}

.esoring {
  font-size: 0.28rem;
  border-radius: 0.62rem;
  height: 0.88rem;
  width: 100%;
  text-align: center;
  line-height: 0.88rem;
  background: linear-gradient(90deg, #FAD7A6 0%, #DAAB6A 100%);
  color: #000000;
}

.videoList {
  .list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: 31.4%;
      margin-right: 0rem;
      .pic{
        border-radius: 0.2rem;
        position: relative;
        &::after{
          content: attr(data-text);
          position: absolute;
          width: 0.8rem;
          top: 0;
          right: 0;
          background: var(--color-orange-77, #FFDF89);
          color: #000000;
          font-size: 0.18rem;
          text-align: center;
          border-radius: 0 0.2rem 0 0.12rem;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
